import React from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {
    Button,
    Drawer,
    List,
    WhiteSpace,
    Flex,
    WingBlank,
} from '@ant-design/react-native';

export default class StatisticalPark extends React.Component {
    constructor() {
        super(...arguments);
        this.onOpenChange = (isOpen) => {
            /* tslint:disable: no-console */
            console.log('是否打开了 Drawer', isOpen.toString());
        };
        this.state = {
            //列表
            arr: [
                {
                    xq: '华帝邻域',
                    qy: '负一楼',
                    bh: 'B-1212',
                    lcount: 50,
                    sc: 500,
                },
                {
                    xq: '华帝邻域',
                    qy: '负一楼',
                    bh: 'B-1212',
                    lcount: 50,
                    sc: 500,
                },
                {
                    xq: '华帝邻域',
                    qy: '负一楼',
                    bh: 'B-1212',
                    lcount: 50,
                    sc: 500,
                },
            ],
        };

        console.disableYellowBox = true;
    }

    render() {
        const itemArr = Array.apply(null, Array(20))
            .map(function (_, i) {
                return i;
            })
            .map((_i, index) => {
                if (index === 0) {
                    return (
                        <List.Item
                            key={index}
                            thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
                            multipleLine>
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                }}>
                                <Text>华帝王朝 - {index}</Text>
                                <Button
                                    type="primary"
                                    size="small"
                                    onPress={() => this.drawer.closeDrawer()}>
                                    关闭
                                </Button>
                            </View>
                        </List.Item>
                    );
                }
                return (
                    <List.Item
                        key={index}
                        thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png">
                        <Text>碧桂园 - {index}</Text>
                    </List.Item>
                );
            });
        // Todo: https://github.com/DefinitelyTyped/DefinitelyTyped
        const sidebar = (
            <ScrollView style={[styles.container]}>
                <List>{itemArr}</List>
            </ScrollView>
        );
        return (
            <ScrollView style={{flex: 1}}>
                <WingBlank style={{marginBottom: 5}}>
                    <Drawer
                        sidebar={sidebar}
                        position="bottom"
                        open={false}
                        drawerRef={(el) => (this.drawer = el)}
                        onOpenChange={this.onOpenChange}
                        drawerBackgroundColor="#ccc">
                        <View style={{flex: 1, height: 600}}>
                            <Button
                                style={{width: '50%'}}
                                onPress={() =>
                                    this.drawer && this.drawer.openDrawer()
                                }>
                                选择楼盘
                            </Button>
                            <WhiteSpace />
                            {this.state.arr.map((itemArr) => {
                                return (
                                    <>
                                        <View
                                            style={{
                                                marginBottom: 5,
                                                borderWidth: 0.3,
                                            }}>
                                            <Flex justify="around">
                                                <Text>{itemArr.xq}</Text>
                                                <Text>{itemArr.qy}</Text>
                                                <Text>{itemArr.bh}</Text>
                                            </Flex>
                                            <Flex justify="around">
                                                <Text>
                                                    浏览量：{itemArr.lcount}
                                                </Text>
                                                <Text>收藏量{itemArr.sc}</Text>
                                            </Flex>
                                        </View>
                                    </>
                                );
                            })}
                        </View>
                    </Drawer>
                </WingBlank>
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    wingblank: {
        marginTop: 10,
        paddingBottom: 10,
        borderWidth: 0.3,
        paddingLeft: '1%',
        paddingRight: '1%',
    },
});
